<template>
  <div class="wrapper">
		<swiper :options="swiperOption">
			<swiper-slide v-for="(page, index) in pages" :key="index">
				<div class="icon" v-for="item in page" :key="item.id">
					<div class="icon-img">
						<img class="icon-img-content"
						:src='item.imgUrl' />
					</div>
					<p class="icon-desc">{{ item.desc }}</p>
				</div>
			</swiper-slide>
		</swiper>
	</div>
</template>

<script>
export default {
  name: 'HomeIcons',
	props:{
		list:Array
	},
  data () {
    return {
			swiperOption:{
				pagination: {
					paginationClickable :false
				},
				loop      : true,
				autoplay:false
			}
    }
  },
	computed: {
		pages () {
			const pages = []
			this.list.forEach((item, index) => {
				const page = Math.floor(index / 8)
				if (!pages[page]) {
					pages[page] = []
				}
				pages[page].push(item)
			})
			return pages
		}
	}
}
</script>

<style scoped lang="scss">
	@import '~@/styles/mixins.scss';
	.wrapper >>> .swiper-container{
		// 占位
		width:100%;
		height:0px;
		padding-bottom: 50%;
		border:1px solid green;
		box-sizing:border-box;
		}
		.wrapper{
		margin-top: 0.1rem;
		.icon{
			position: relative;
			overflow: hidden;
			float: left;
			width: 25%;
			height: 0px;
			padding-bottom: 25%;
			.icon-img{
				position: absolute;
				top:0;
				left:0;
				right:0;
				bottom:0.44rem;
				box-sizing: border-box;
				padding:.1rem;
				.icon-img-content{
					display: block;
					margin:0 auto;
					height:80%;
				}
			}
			.icon-desc{
				position: absolute;
				top:1.3rem;
				left:0.33rem;
				height:.44rem;
				line-height:.44rem;
				text-align: center;
				color:#333;
				@include ellipsis();
			}
		}
	}
</style>
